<template>
  <div ref="echartsRef" class="echart-dom"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
  timeChart:{
    type: Array,
    default: () => []
  },
})
// 存储series数据
const seriesData = ref([])
// 存储日期
const timeData = ref([])
const echartsRef = ref()
onMounted(() => {
  getData()
})
const getData = () => {
  seriesData.value = props.timeChart.map(item => item.num)
  timeData.value = props.timeChart.map(item => item.time)
  initEcharts()
}
const initEcharts = () => {
  const myEcharts = echarts.init(echartsRef.value)
  const option = {
    grid: {
      left: '5%',  
      right: '5%', 
      top: '10%',  
      bottom: '10%', 
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      show: false,
      data: timeData.value
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [
      {
        data: seriesData.value,
        type: 'line',
        lineStyle: {
          color: '#007bff',
        },
        areaStyle: {
          color: 'rgba(0, 123, 255, 0.2)',
        },
        itemStyle: {
          color: '#007bff',
        },
        symbol: 'none'
      }
    ]
  }
  myEcharts.setOption(option);
  window.addEventListener('resize', function () {
    myEcharts.resize()
  })
}
</script>

<style lang="scss" scoped>
.echart-dom {
  width: 100px;
  height: 55px;
}
</style>